<template>
  <div class="flex flex-col gap-4">
    <div class="text-center text-lg font-bold">Total Win/Loss</div>
    <div class="text-center text-2xl font-mono" :class="totalWinlose >= 0 ? 'text-blue-600' : 'text-red-600'">
      {{ totalWinlose >= 0 ? '+' : '' }}{{ totalWinlose.toFixed(2) }}
    </div>
    <div class="mt-2">
      <div class="font-bold mb-1">Trend</div>
      <div class="flex flex-wrap gap-2">
        <span v-for="(t, i) in trend" :key="i" :class="trendColor(t)" class="font-bold text-lg">{{ trendLabel(t) }}</span>
      </div>
    </div>
    <div class="mt-2">
      <div class="font-bold mb-1">History (last 10)</div>
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead>
            <tr class="text-gray-600">
              <th class="px-2">Result</th>
              <th class="px-2">Bet</th>
              <th class="px-2">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(h, i) in history" :key="i">
              <td class="px-2">{{ trendLabel(h.actual) }}</td>
              <td class="px-2">{{ trendLabel(h.bet) }}</td>
              <td class="px-2" :class="h.amount >= 0 ? 'text-blue-600' : 'text-red-600'">
                {{ h.amount >= 0 ? '+' : '' }}{{ h.amount.toFixed(2) }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../logic/api'

const totalWinlose = ref(0)
const trend = ref([])
const history = ref([])

function trendLabel(t) {
  if (t === 'player') return 'P'
  if (t === 'banker') return 'B'
  if (t === 'tie') return 'T'
  return t
}
function trendColor(t) {
  if (t === 'player') return 'text-blue-600'
  if (t === 'banker') return 'text-red-600'
  if (t === 'tie') return 'text-green-600'
  return ''
}

async function fetchState() {
  const res = await api.game.getState()
  totalWinlose.value = res.total_winlose || 0
  trend.value = res.trend || []
  history.value = res.history || []
}

onMounted(fetchState)
</script> 